<template>
  <div class="setting">
    <h2 class="title">参数设置</h2>
    <el-select v-model="config.deviceId" class="camera-select no-drag" placeholder="选择摄像头" clearable>
      <el-option
        v-for="item in cameras"
        :key="item.deviceId"
        :label="item.label"
        :value="item.deviceId"
      >
      </el-option>
    </el-select>
    <el-input v-model="config.borderWidth" class="no-drag" placeholder="边框宽度" />
    <el-input v-model="config.borderColor" class="no-drag" placeholder="边框颜色" />
  </div>
</template>

<script setup lang="ts">
import { useConfigStore } from '@renderer/stores/useConfigStore'

const { config } = useConfigStore()
// 获取电脑的所有的设备
const devices = await navigator.mediaDevices.enumerateDevices()
// 过滤出所有的摄像头
const cameras = devices.filter((item) => item.kind.includes('video'))
console.log(cameras)
</script>

<style lang="less" scoped>
.setting {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  padding: 15px;
  background: #2c3e50;
  box-sizing: border-box;

  .title {
    margin-top: 25px;
    font-size: 14px;
    color: #fff;
    opacity: 0.8;
  }

  > :nth-child(n) {
    margin-bottom: 15px;
  }
}
</style>
